<template>
  <div
    class="w-full h-full flex justify-center items-center bg-gradient-to-r from-main3 via-main to-main2"
    @click="toHome"
  >
    <div class="animate__animated animate__backInLeft dong">
      <Icon :IconClass="mainIcon" :width="'3rem'" :height="'3rem'" />
    </div>
    <div class="font-bold italic animate__animated animate__backInRight">
      {{ applicationName }}
    </div>
    <!-- <h2>state根数据: {{ $store.state.rootCounter }}</h2>
    <h2>account 模块中的数据：{{ $store.state.account.homeCounter }}</h2>
    <h2>doubleCounter {{ $store.getters['account/doubleHomeCounter'] }}</h2>
    <h2>increment {{ $store.state.increment }}</h2>
    <button @click="accountFun">+2</button>
    <button @click="actionFun">+3</button> -->
  </div>
</template>

<script lang="ts">
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { useStore, mapState } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { useState } from '@/hook/useState'
import Icon from '@/components/svg/index.vue'
export default {
  name: '',
  setup() {
    const store = useStore()
    const storeStateFns = useState('account', ['count', 'name', 'clientWidth'])
    const mainIcon = ref<string>('#icon-heijiaochangpianji')
    const applicationName = ref<string>('阿一音乐')
    const router = useRouter()

    const toHome = () => {
      console.log('111')
      setTimeout(() => {
        router.push({
          path: '/home/1'
        })
      }, 2000)
    }
    const accountFun = () => {
      store.commit('account/increment', 2)
    }
    const actionFun = () => {
      store.dispatch('account/incrementAction', 3)
    }
    onMounted(() => {
      toHome()
    })
    return {
      mainIcon,
      applicationName,
      ...storeStateFns,
      accountFun,
      actionFun,
      toHome
    }
  },

  components: {
    Icon
  }
}
</script>
<style lang="scss" scoped>
.dong {
  width: 3rem;
  height: 3rem;
  animation: fadenum 4s infinite;
}
@keyframes fadenum {
  100% {
    transform: rotate(360deg);
  }
}
</style>
